import { Layout, Menu, Dropdown } from 'antd';
import { Link, setLocale, SettingModelState, useIntl, useSelector } from 'umi';
import styles from './index.less';
import Theme from '@/components/Theme';
import classNames from 'classnames';
import { getLocale } from 'umi';
import { useEffect } from 'react';

const { Header } = Layout;
const menus = [{
  item: '文章',
  link: '/'
}, {
  item: '归档',
  link: '/archives'
}, {
  item: '知识小册',
  link: '/knowledge'
}]
const locales: {[key:string]:string} = {
  'zh-CN': 'zh',
  'en-US': 'en',
  'zh': 'zh',
  'en': 'en'
}
const CommonHeader = ()=>{
  const intl = useIntl();

  useEffect(()=>{
    setLocale(locales[getLocale()]);
  }, []);
  const menu = <Menu>
    <Menu.Item key="zh" onClick={()=>setLocale('zh', false)}>{intl.formatMessage({id: 'zh', defaultMessage: '中文'})}</Menu.Item>
    <Menu.Item key="en" onClick={()=>setLocale('en', false)}>{intl.formatMessage({id: 'en', defaultMessage: '英文'})}</Menu.Item>
  </Menu>
  const {setting, pageSetting} = useSelector((state: { setting: SettingModelState }) =>state.setting);
  return <Header className={styles.header}>
    <div className={classNames(styles.container, 'container')}>
      <div className={styles.left}>
        <div className={styles.logo} dangerouslySetInnerHTML={{__html: setting.systemLogo!}}></div>
        {
          menus.map(item=>{
            return <li key={item.item}><Link to={item.link}>{item.item}</Link></li>
          })
        }
        {
          pageSetting.map(item=>{
            return <li key={item.id}><Link to={`/page/${item.path}`}>{item.name}</Link></li>
          })
        }
      </div>
      <div className={styles.right}>
        <li>
          <Dropdown overlay={menu}>
            <span>多语言</span>
          </Dropdown>
        </li>
        <li><Theme /></li>
        <li><span>搜索</span></li>
      </div>
    </div>
  </Header>
}

export default CommonHeader;
